<template>
    <div id="v-right-b">
        <div class="car-out">
            <ul class="car-s">
                <li><span class="text-s">新增</span><span class="car-info in-s">328</span></li>
                <li><span class="text-s">关闭</span><span class="car-info out-s">123</span></li>
                <li><span class="text-s">施工中</span><span class="car-info stay-s">294</span></li>
            </ul>
            <div style="width: 100%;height: 100%;" ref="carChar"></div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , nextTick, reactive , toRaw } from 'vue';
import * as echarts from 'echarts';
import ecTheme from "/@/assets/echartsConfig/westeros.project.json";
export default defineComponent({
    name:'v-right-b',
    setup(props){
        const carChar:Ref = ref(null);
        echarts.registerTheme('westeros', ecTheme);
        const initCharts = () => {
            let chart: any; 
            chart = echarts.init(carChar.value as HTMLElement, 'westeros');
            let option:any = {
                legend: {
                    bottom: 20,
                    left: 'center',
                    textStyle:{
                        color:'#FFFFFF',
                    },
                    itemWidth: 12,
                    itemHeight: 12,
                    padding: 0,
                    data: [
                        {name: '新增',icon: 'rect',itemStyle:{color:'rgb(6,206,255)'}},
                        {name: '关闭',icon: 'rect',itemStyle:{color:'rgb(255,195,0)'}},
                        {name: '施工中',icon: 'rect',itemStyle:{color:'rgb(255,36,36)'}},
                    ],
                },
                grid: {
                    left: '2%',
                    // height: '60%',
                    top:15,
                    width: '96%',
                    bottom: 40,
                    containLabel: true
                },
                tooltip: {},
                dataset: {
                    dimensions: ['product', '新增', '关闭', '施工中'],
                    source: []
                },
                xAxis: { 
                    type: 'category',
                    axisLine:{
                        lineStyle: {
                            color:'#3f6986',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#FFFFFF"
                        } 
                    }
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            color: ['#3f6986']
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            color:'#3f6986',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#FFFFFF"
                        } 
                    },
                    min: 0,
                    max: 200,
                },
                series: [
                    { 
                        type: 'bar',
                        barMaxWidth: '20%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgb(6,204,253)' },
                                { offset: 1, color: 'rgb(6,74,104)' }
                            ])
                        }
                    }, 
                    { 
                        type: 'bar',
                        barMaxWidth: '20%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgb(251,193,0)' },
                                { offset: 1, color: 'rgb(97,74,0)' }
                            ])
                        }
                    },
                    { 
                        type: 'bar',
                        barMaxWidth: '20%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgb(244,34,34)' },
                                { offset: 1, color: 'rgb(91,3,3)' }
                            ])
                        }
                    },
                ]
            }
            option.dataset.source = [
                { product: '02-01', '新增': 43, '关闭': 85, '施工中': 93 },
                { product: '02-05', '新增': 83, '关闭': 73, '施工中': 55 },
                { product: '02-10', '新增': 86, '关闭': 65, '施工中': 82 },
                { product: '02-15', '新增': 72, '关闭': 53, '施工中': 39 },
                { product: '02-20', '新增': 72, '关闭': 53, '施工中': 39 },
                { product: '02-25', '新增': 72, '关闭': 53, '施工中': 39 },
                { product: '02-30', '新增': 20, '关闭': 15, '施工中': 30 }
            ]
            return option && chart.setOption(option)
        }
        onMounted(() => {
            nextTick(() => {
                initCharts()
            })
        })
        return {
            carChar,
        }
    }
})
</script>
<style lang="scss" scoped>
#v-right-b{
    width: 100%;
    height: 100%;
    ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .car-out{
        margin: 6vh auto 0 auto;
        height: 72%;
        width: 90%;
    }
    .car-s{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 76%;
        margin: auto;
        li{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;  
        }
        .car-info,.text-s{
            display: block;
        }
        .car-info{
            width: 40px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            margin-left: 5px;
        }
        .in-s{
            background-image: url(../../../image/in.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
        }
        .out-s{
            background-image: url(../../../image/out.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
        }
        .stay-s{
            background-image: url(../../../image/stay.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
        }
    }
}
</style>